<template>
  <el-card class="systemIndexBox">
    <div class="base-info">
      <common-group-title title="基本信息"></common-group-title>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        @submit.native.prevent
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="Logo" prop="logoImg">
              <el-upload
                :auto-upload="true"
                class="avatar-uploader"
                action="#"
                :http-request="requestUpload"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="logo" :src="logo" class="avatar" alt=" " />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

              <span v-if="form.logoType === '1'" class="tip"
                >仅支持300KB以下图片，建议logo尺寸200 x 60px；</span
              >
              <span v-else class="tip"
                >仅支持300KB以下图片，建议logo尺寸40 x 40px；</span
              >
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-row>
              <el-col>
                <el-form-item label="企业名称" prop="companyName">
                  <common-input v-model="form.companyName" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="系统名称" prop="systemName">
                  <common-input v-model="form.systemName" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col>
                <el-form-item label="版权信息" prop="copyrightInfo">
                  <common-input :verify="false" v-model="form.copyrightInfo" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col>
                <el-form-item label="Logo类型" prop="logoType">
                  <el-select
                    placeholder="请选择"
                    v-model="form.logoType"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in logoTypeList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col>
                <el-form-item label="系统版本" prop="version">
                  <common-input
                    :verify="false"
                    v-model="form.version"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="dotash">
      <common-group-title title="样式配置"></common-group-title>
      <el-form label-width="110px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="导航风格">
              <div
                class="setting-drawer-block-checbox"
                style="min-height: 42px"
              >
                <div
                  class="setting-drawer-block-checbox-item"
                  @click="handleTheme('theme-dark')"
                >
                  <img src="@/assets/images/dark.svg" alt="dark" />
                  <div
                    v-if="sideTheme === 'theme-dark'"
                    class="setting-drawer-block-checbox-selectIcon"
                    style="display: block"
                  >
                    <i aria-label="图标: check" class="anticon anticon-check">
                      <svg
                        viewBox="64 64 896 896"
                        data-icon="check"
                        width="1em"
                        height="1em"
                        fill="currentColor"
                        aria-hidden="true"
                        focusable="false"
                        class=""
                      >
                        <path
                          d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
                        />
                      </svg>
                    </i>
                  </div>
                </div>
                <div
                  class="setting-drawer-block-checbox-item"
                  @click="handleTheme('theme-light')"
                >
                  <img src="@/assets/images/light.svg" alt="light" />
                  <div
                    v-if="sideTheme === 'theme-light'"
                    class="setting-drawer-block-checbox-selectIcon"
                    style="display: block"
                  >
                    <i aria-label="图标: check" class="anticon anticon-check">
                      <svg
                        viewBox="64 64 896 896"
                        data-icon="check"
                        width="1em"
                        height="1em"
                        fill="currentColor"
                        aria-hidden="true"
                        focusable="false"
                        class=""
                      >
                        <path
                          d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
                        />
                      </svg>
                    </i>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="导航模式">
              <div
                class="ant-pro-setting-drawer-block-checkbox"
                style="min-height: 42px"
              >
                <el-popover
                  placement="top"
                  trigger="hover"
                  content="侧边菜单布局"
                >
                  <template slot="reference">
                    <div
                      class="ant-pro-setting-drawer-block-checkbox-item ant-pro-setting-drawer-block-checkbox-item-side ant-pro-setting-drawer-block-checkbox-layout-item"
                      @click="handleBar('left')"
                    >
                      <span
                        role="img"
                        aria-label="check"
                        class="anticon anticon-check ant-pro-setting-drawer-block-checkbox-selectIcon"
                        style="display: block"
                        v-if="topNav === 'left'"
                      >
                        <svg
                          viewBox="64 64 896 896"
                          focusable="false"
                          data-icon="check"
                          width="1em"
                          height="1em"
                          fill="currentColor"
                          aria-hidden="true"
                        >
                          <path
                            d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
                          ></path>
                        </svg>
                      </span>
                    </div>
                  </template>
                </el-popover>
                <el-popover
                  placement="top"
                  trigger="hover"
                  content="顶部菜单布局"
                >
                  <template slot="reference">
                    <div
                      class="ant-pro-setting-drawer-block-checkbox-item ant-pro-setting-drawer-block-checkbox-item-top ant-pro-setting-drawer-block-checkbox-layout-item"
                      @click="handleBar('top')"
                    >
                      <span
                        role="img"
                        aria-label="check"
                        class="anticon anticon-check ant-pro-setting-drawer-block-checkbox-selectIcon"
                        style="display: block"
                        v-if="topNav === 'top'"
                      >
                        <svg
                          viewBox="64 64 896 896"
                          focusable="false"
                          data-icon="check"
                          width="1em"
                          height="1em"
                          fill="currentColor"
                          aria-hidden="true"
                        >
                          <path
                            d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
                          ></path>
                        </svg>
                      </span>
                    </div>
                  </template>
                </el-popover>
                <el-popover
                  placement="top"
                  trigger="hover"
                  content="混合菜单布局"
                >
                  <template slot="reference">
                    <div
                      class="ant-pro-setting-drawer-block-checkbox-item ant-pro-setting-drawer-block-checkbox-item-mix ant-pro-setting-drawer-block-checkbox-layout-item"
                      @click="handleBar('leftAndTop')"
                    >
                      <span
                        role="img"
                        aria-label="check"
                        class="anticon anticon-check ant-pro-setting-drawer-block-checkbox-selectIcon"
                        style="display: block"
                        v-if="topNav === 'leftAndTop'"
                      >
                        <svg
                          viewBox="64 64 896 896"
                          focusable="false"
                          data-icon="check"
                          width="1em"
                          height="1em"
                          fill="currentColor"
                          aria-hidden="true"
                        >
                          <path
                            d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
                          ></path>
                        </svg>
                      </span>
                    </div>
                  </template>
                </el-popover>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="平台主题">
              <theme-picker
                style="height: 26px; margin-top: 11px"
                @change="themeChange"
                :tmpSideTheme="tmpSideTheme"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="菜单字体颜色">
              <font-color-picker
                style="height: 26px; margin-top: 11px"
                @change="fontColorChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- <div class="dotash" >
      <common-group-title title="系统名称自适应"></common-group-title>
      <el-form label-width="60px">
        <el-form-item prop="isSelfAdapt">
          <el-switch
            v-model="form.isSelfAdapt"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </el-form-item>
      </el-form>
    </div> -->

    <div class="dotash" v-if="isAdmin">
      <common-group-title title="三方系统集成"></common-group-title>
      <el-form label-width="60px">
        <el-form-item prop="isThird">
          <el-switch
            v-model="form.isThird"
            active-text="启用"
            inactive-text="不启用"
          >
          </el-switch>
        </el-form-item>
      </el-form>
    </div>
    <el-button
      class="saveSetting"
      :loading="loading"
      type="primary"
      plain
      @click="saveSetting"
      >保存配置
    </el-button>

    <el-button class="saveSetting" :loading="resetLoading" plain @click="reset"
      >重置
    </el-button>
  </el-card>
</template>

<script>
import { getInfoStyle, editStyle, upLoadSysStylePic } from "@/api/system/index";
import { getUserPic } from "@/api/person";
import { mapGetters } from "vuex";
import ThemePicker from "@/components/ThemePicker";
import FontColorPicker from "@/components/FontColorPicker";
import BaseList from "@/mixins/BaseList";
import defaultSettings from "@/settings";

export default {
  mixins: [BaseList],
  components: { ThemePicker, FontColorPicker },
  name: "index",
  data() {
    return {
      form: {
        logoType: "0",
        version: "",
        isThird: false,
        isSelfAdapt: false,
      },
      rules: {
        companyName: [
          {
            required: true,
            message: "请输入企业名称",
            trigger: "blur",
          },
        ],
        systemName: [
          {
            required: true,
            message: "请输入系统名称",
            trigger: "blur",
          },
        ],
        copyrightInfo: [
          {
            required: true,
            message: "请输入版权信息",
            trigger: "blur",
          },
        ],
      },
      imageUrl: "",
      imageUrl2: "",
      id: "1",
      loading: false,
      imageResult: null,
      logo: "",
      sideTheme: "",
      theme: "",
      tmpSideTheme: "",
      tmpTheme: "",
      topNav: "",
      logoTypeList: [
        { label: "纯logo", value: "0" },
        { label: "图文logo", value: "1" },
      ],
      resetLoading: false,
    };
  },
  computed: {
    ...mapGetters(["systemInfo", "isAdmin"]),
    setTheme() {
      return this.systemInfo.theme;
    },
  },
  created() {
    this.getInfoStyle();
  },
  mounted() {
    this.logo = this.systemInfo.logo;
    this.sideTheme = this.systemInfo.sideTheme;
    this.theme = this.systemInfo.theme;
    this.topNav = this.systemInfo.topNav;
    this.fontColor = this.systemInfo.colorValue;
  },
  methods: {
    fontColorChange(val) {
      this.fontColor = val;
      this.$store.commit("system/SET_FONT_COLOR", val);
    },
    themeChange(val) {
      this.tmpTheme = val;
      if (this.getWarningToast()) return;
      this.theme = val;
      this.$store.commit("system/SET_THEME", val);
    },
    handleTheme(val) {
      this.tmpSideTheme = val;
      if (this.getWarningToast()) return;
      this.sideTheme = val;
      this.$store.commit("system/SET_SIDE_THEME", val);
    },
    handleBar(val) {
      this.topNav = val;
      this.$store.commit("system/SET_TOP_NAV", val);
      this.$store.commit(
        "SET_SIDEBAR_ROUTERS",
        this.$store.state.permission.defaultRoutes
      );
    },

    getWarningToast() {
      if (this.tmpSideTheme === "theme-light" && this.tmpTheme === "#FFFFFF") {
        this.$message.warning(
          "当前导航风格为浅色, 主题色为白色, 影响使用, 请重新配置"
        );
        return true;
      }
    },
    getInfoStyle() {
      getInfoStyle({ id: this.id })
        .then((res) => {
          if (res && res.code === 200) {
            this.id = res.data.id;
            let dataJSON = {};
            if (res.data.systemJson) {
              dataJSON = JSON.parse(res.data.systemJson);
              if (!dataJSON.logoType) {
                dataJSON.logoType = "0";
              }
              if (!dataJSON.isThird) {
                dataJSON.isThird = false;
              }
              if (!dataJSON.isSelfAdapt) {
                dataJSON.isSelfAdapt = false;
              }
              this.form = dataJSON;
              this.form.version = res.data.version;
              console.log(this.form);
            } else {
              this.form = {};
            }
          } else {
            this.$GlobalErrorConfirm("数据加载失败", res.msg, "重新加载").then(
              () => {
                this.getInfoStyle();
              }
            );
            this.handleListTips(res);
          }
        })
        .finally(() => {
          this.isPersistenceLoading = false;
        });
    },
    reset() {
      this.resetLoading = true;
      this.topNav = defaultSettings.topNav;
      this.sideTheme =
        window.sp_config.LAYOUT_TYPE === 2
          ? defaultSettings.gansuSideTheme
          : defaultSettings.sideTheme;
      this.theme =
        window.sp_config.LAYOUT_TYPE === 2
          ? defaultSettings.gansuTheme
          : defaultSettings.theme;
      this.fontColor = defaultSettings.fontColor;
      this.editStyle(
        {
          ...this.form,
          imageUrl: this.imageUrl,
          topNav: this.topNav,
          sideTheme: this.sideTheme,
          theme: this.theme,
          fontColor: this.fontColor,
          isThird: false,
          isSelfAdapt: false,
        },
        "reset"
      );
    },
    saveSetting() {
      if (this.getWarningToast()) return;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;

          const params = {
            ...this.form,
            imageUrl: this.imageUrl, // 图片地址
            topNav: this.topNav,
            sideTheme: this.sideTheme,
            theme: this.theme,
            fontColor: this.fontColor,
          };
          if (this.imageResult) {
            let formData = new FormData();
            formData.append(
              "avatarfile",
              new Blob([this.imageResult], { type: "image/jpeg" })
            );
            upLoadSysStylePic(formData).then((res) => {
              if (res && res.code === 200) {
                this.$store.dispatch("system/setLogo");
                // this.$GlobalSuccessMessage('上传成功')
                this.editStyle(params);
              } else {
                this.$GlobalErrorConfirm("上传失败", res.msg);
              }
            });
          } else {
            this.editStyle(params);
          }
        }
      });
    },

    editStyle(params, flag) {
      editStyle({
        id: "1",
        systemJson: JSON.stringify(params),
      })
        .then((res) => {
          if (res && res.code === 200) {
            this.$store.dispatch("system/setSystemInfo");
            if (flag === "reset") {
              this.$GlobalSuccessMessage("重置成功");
            } else {
              this.$GlobalSuccessMessage("保存成功");
            }

            this.open = false;
            this.getInfoStyle();
          } else {
            if (flag === "reset") {
              this.$GlobalErrorConfirm("重置失败", res.msg);
            } else {
              this.$GlobalErrorConfirm("保存失败", res.msg);
            }
          }
        })
        .finally(() => {
          this.loading = false;
          this.resetLoading = false;
        });
    },
    requestUpload(v) {
      const reader = new FileReader();
      reader.readAsArrayBuffer(v.file);
      reader.onload = (e) => {
        console.log(e);
        this.logo = window.URL.createObjectURL(
          new Blob([e.target.result], { type: "image/jpeg" })
        );
        this.imageResult = e.target.result;
      };
    },
    beforeAvatarUpload(file) {
      let { size, type } = file;
      let maxSize = 300 * 1000;

      if (size > maxSize) {
        this.$GlobalErrorConfirm("上传失败", "Logo大小限制300K");
        return false;
      }

      if (type.indexOf("image/") === -1) {
        this.$GlobalErrorConfirm("上传失败", "请上传正确的图片格式");
        return false;
      }

      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.systemIndexBox {
  overflow-y: scroll;
  .base-info {
    border-bottom: 1px dashed #ccc;
  }
  .dotash {
    border-bottom: 1px dashed #ccc;
    padding: 10px 0;
    ::v-deep .el-form-item__label {
      line-height: 48px;
    }
  }

  .tip {
    font-size: 12px;
    color: #666;
  }

  .titleP {
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
    border-left: 3px solid #409eff;
    padding-left: 6px;
    height: 14px;
  }

  .saveSetting {
    margin-top: 20px;
  }

  .avatar-uploader {
    ::v-deep .el-upload {
      border: 1px dashed #d9d9d9;
      background-color: #f0f0f0;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;

      &:hover {
        border-color: #409eff;
      }
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  ::v-deep .el-form-item__label {
    padding-right: 15px !important;
  }

  /* 导航模式--start */
  .ant-pro-setting-drawer-block-checkbox {
    display: flex;
  }

  .ant-pro-setting-drawer-block-checkbox-item {
    position: relative;
    width: 44px;
    height: 38px;
    margin-right: 16px;
    overflow: hidden;
    background-color: #f0f2f5;
    border-radius: 4px;
    box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
    cursor: pointer;
    margin-top: 4px;
  }

  .ant-pro-setting-drawer-block-checkbox-item:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 33%;
    height: 100%;
    background-color: #fff;
    content: "";
  }

  .ant-pro-setting-drawer-block-checkbox-item-dark:before,
  .ant-pro-setting-drawer-block-checkbox-item-side:before {
    z-index: 1;
    background-color: #001529;
    content: "";
  }

  .anticon {
    display: inline-block;
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -0.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .ant-pro-setting-drawer-block-checkbox-selectIcon {
    position: absolute;
    right: 6px;
    bottom: 4px;
    color: #1890ff;
    font-weight: 700;
    font-size: 14px;
    pointer-events: none;
  }

  .anticon > * {
    line-height: 1;
  }

  svg:not(:root) {
    overflow: hidden;
  }

  .anticon svg {
    display: inline-block;
  }

  .ant-pro-setting-drawer-block-checkbox-item:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;
    background-color: #fff;
    content: "";
  }

  .ant-pro-setting-drawer-block-checkbox-item-dark:after,
  .ant-pro-setting-drawer-block-checkbox-item-side:after {
    background-color: #fff;
  }

  .ant-pro-setting-drawer-block-checkbox-item-top:before {
    background-color: transparent;
    content: "";
  }

  .ant-pro-setting-drawer-block-checkbox-item-top:after {
    background-color: #001529;
  }

  .ant-pro-setting-drawer-block-checkbox-item-mix:before {
    background-color: #fff;
    content: "";
  }

  .ant-pro-setting-drawer-block-checkbox-item-mix:after {
    background-color: #001529;
  }

  .setting-drawer-block-checbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;

    .setting-drawer-block-checbox-item {
      position: relative;
      margin-right: 16px;
      border-radius: 2px;
      cursor: pointer;

      img {
        width: 48px;
        height: 48px;
      }

      .setting-drawer-block-checbox-selectIcon {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        padding-top: 15px;
        padding-left: 24px;
        color: #1890ff;
        font-weight: 700;
        font-size: 14px;
      }
    }
  }

  /* 导航模式--end */
}
</style>
